<template>
  <div>
    <div class="index">
      <div :style="{backgroundImage:`url(${headerImg})`}" style="height: 3.4rem; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; position: relative; z-index: 99"></div>
<!--      <img alt="Vue logo" :src="logo" style="position: absolute; top: .24rem; left: .29rem; width: 1.42rem; height: .51rem; z-index: 100">-->
      <div class="item-list">

        <div class="list-group">
          <div>
            <p style="text-indent: 2em;">
              根据《植得口腔2023年度评优评先方案》，经集团各中心、各院区评选，报集团评优评先工作组委会审核决议，现将各奖项获奖名单予以公示，接受全体员工监督。
            </p>
            <p style="text-indent: 2em;">
              公示期限：2024年1月31日。公示期限内，各单位、个人对公示对象有疑问或异议，可点击公示链接右下角信箱反馈（匿名）。
            </p>
          </div>
        </div>

        <div class="list-group">
          <div>
            <div style="margin-top: .2rem; text-align: center;  font-size: .37rem; font-weight: bold;">优秀院区奖2个</div>
            <div style="text-align: center;">花园院区</div>
            <div style="text-align: center;">驻马店院区</div>
          </div>
        </div>

        <div class="list-group" v-for="o in elects" v-bind:key="o.honor">
          <div style="margin-top: .2rem; text-align: center;  font-size: .37rem; font-weight: bold;">{{o.honor}}</div>
          <van-row v-for="(o1, index1) in o.items" class="list-item" v-bind:key="index1">
            <van-col offset="3" span="12">{{o1[0]}}</van-col>
            <van-col span="9">{{o1[1]}}</van-col>
          </van-row>
        </div>
      </div>
      <div :style="{backgroundImage:`url(${footImg})`}" style="height: 4.27rem; background-size: contain; position: fixed;  z-index: 10; bottom: 0; width: 100%;"></div>
    </div>
    <div @click="onButtonClick" style="width: 29px;
    color: rgb(238, 93, 8);
    position: fixed;
    z-index: 99;
    height: 29px;
    padding: 0.23rem;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    bottom: 113px;
    right: 50px;
    box-shadow: 0 0 9px #000000a3;">
      <svg t="1611905353853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2019" data-spm-anchor-id="a313x.7781069.0.i0" width="200" height="200" style="
    width: 29px;
    height: 29px;
">
        <path d="M884.363636 339.223273l139.636364 63.464727V1024H0V402.688l139.636364-63.464727V0h744.727272v339.223273z m0 102.260363V488.727273l49.501091-24.762182L884.363636 441.483636zM791.272727 535.272727V93.090909H232.727273v442.181818l279.272727 139.636364 279.272727-139.636364zM139.636364 488.727273v-47.243637l-49.501091 22.481455L139.636364 488.727273z m186.181818-302.545455h372.363636v93.090909H325.818182V186.181818z m0 186.181818h279.272727v93.090909H325.818182v-93.090909z"
              fill="#ee5d08" p-id="2020"></path>
      </svg>
    </div>
  </div>

</template>

<script>
    import {mapGetters} from 'vuex'
    import {Toast} from 'vant';
    import request from '@/utils/request'

    export default {
        name: "index",
        mixins: [window.mixins.clone],
        inject: ["reload"],
        data() {
            return {
                search: {},
                lists: [],
                headerImg: require("@/assets/images/header.jpg"),
                logo: require("@/assets/logo.png"),
                footImg: require("@/assets/images/footer.jpg")
            }
        },
        computed: {
            ...mapGetters([
                'activity'
            ]),
            elects() {
                let data = []
                let maps = {}
                this.lists.forEach((o) => {
                    if (!maps[o.honor]) {
                        maps[o.honor] = {
                            honor: o.honor,
                            items: []
                        }
                        data.push(maps[o.honor])
                    }
                    maps[o.honor]['items'].push([o.department, o.name])
                })
                return data
            }
        },
        beforeRouteEnter(to, from, next) {
            to.meta.keepAlive = true
            if (to.meta.refresh) {
                console.log("refresh index list....")
                next(vm => {
                    vm.reload() // Call method of app.vue
                })
            } else {
                next()
            }
        },
        created() {
            console.log("index created")
        },
        async mounted() {
            console.log("index mounted")
            if (!window.vars.activity) {
             await this.getActivity()
            }
            this.$nextTick(() => {
                setTimeout(() => {
                    this.getList()
                })
            })
        },
        activated() {
            console.log("index activated")

        },
        methods: {
            getSearchCondition() {
                let search = {}
                Object.keys(this.search).forEach((key) => {
                    if (key.substr(0, 1) != '_' && this.search[key]) {
                        search[key] = this.search[key]
                    }
                })
                return search
            },
            async getActivity() {
              let activityId = this.$route.query.id
              Toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
              });
              await request({
                url: '/api/activity_emp_elect/' + activityId,
                method: 'get',
                params: this.getSearchCondition()
              }).then((response) => {
                let result = response.data
                let data = result.data
                this.$store.state.activity = window.vars.activity = data
                Toast.clear();
              }).catch(() => {
                Toast.clear();
              })

            },
            getList() {
                Toast.loading({
                    duration: 0,
                    message: '加载中...',
                    forbidClick: true,
                });
                request({
                    url: '/api/activity_emp_elect_member/' + this.activity.id + '/lists',
                    method: 'get',
                    params: this.getSearchCondition()
                }).then((response) => {
                    let result = response.data
                    let data = result.data
                    let pagination = data.lists
                    pagination['data'].forEach((o) => {
                        this.lists.push(o)
                    })
                    Toast.clear();
                }).catch(() => {
                    Toast.clear();
                })
            },
            onButtonClick() {
                this.$router.push('/form')
            }
        }
    }
</script>

<style scoped>
    .index {
        overflow: scroll;
        height: 17.92rem;
        background: #bc0710;
        position: relative;
    }

    .item-list {
        height: 66%;
        overflow: scroll;
        position: absolute;
        z-index: 19;
        width: 90%;
        left: calc(5%);
        color: #fff;
        line-height: 0.7rem;
        margin-top: .26rem;
        box-sizing: border-box;
    }

    .list-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0 6px;
    }

    .list-group {
        width: 100%;
        color: #fff;
        line-height: 0.7rem;
        background-color: rgba(255, 255, 255, 0.2);
        margin-top: .26rem;
        border-radius: 7px;
        box-shadow: 0 0 5px #b77777ab;
        padding: .2rem;
        box-sizing: border-box;
    }
</style>